import { Spin } from "antd"
import { useImperativeHandle } from "react";
import { useRequest } from "umi"

import styles from './index.less'


const sections = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((i) => `第${i}节`);
const weeks = [0, 1, 2, 3, 4, 5, 6, 7].map((i) => `周${i}`);

interface PropsType {
  cRef: any,
}

const ChooseTable: React.FC<PropsType> = ({cRef}) => {
  const { data, loading, run } = useRequest({
    url: '/api/choose-course'
  })
  useImperativeHandle(cRef, () => ({
    init: () => {
      run()
    }
  }))

  if (loading) {
    return <div className={styles.example}>
      <Spin />
    </div>
  }

  return <div className={styles.root}>
    {/*空课程表前端代码*/}
    <div className={styles.content}>
      <div className={styles.rowHead}>
        {
          weeks.map((item, index) => {
            if (index === 0) {
              return (<div className={styles.empty} />)
            }
            return (<div key={item} className={styles.headItem}>{item}</div>)
          })
        }
      </div>
      {sections.map((rowItem, i) => <div key={rowItem} className={styles.rowItem}>
        {
          weeks.map((columnItem, j) => {

            if (j === 0) {
              return <div className={styles.columnHead}>{rowItem}</div>
            }
            return <div key={columnItem} className={styles.columnItem} />
          })
        }
      </div>)}
    </div>
    {/*课程名称代码*/}
    <div className={styles.topContent}>
      {
        data.map((item: any, i: number) => {
          return <div key={i} className={styles.item} style={{
            top: `${(item.startSection - 1) * 52}px`,
            left: `${(item.weeks - 1) * 100}px`, height: `${(item.endSection - item.startSection + 1) * 52}px`, lineHeight: `${(item.endSection - item.startSection + 1) * 52}px`
          }} >{item.courseName}</div>
        })
      }
    </div>
  </div>
}

export default ChooseTable